<template>
  <div>
    <header class="my-title">本月账单汇总</header>
    <nav>
      <div class="nav-v">
        <router-link exact-active-class="active-v" to="/collect/income">收入明细</router-link>
      </div>
      <div class="nav-v">
        <router-link exact-active-class="active-v" to="/collect/outcome">支出明细</router-link>
      </div>
      <div class="nav-v">
        <router-link exact-active-class="active-v" to="/collect/totalcome">本月汇总</router-link>
      </div>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.nav-v {
  display: inline-block;
  width: calc(100% / 3);
  text-align: center;
  padding: 5px 0;
}
.active-v {
  border-bottom: 1px solid #000;
}
</style>
